<template>
	<view class="moment f">
		<view class="m-L">
			<image :src="moment.uhead" mode="scaleToFill"></image>
		</view>
		<view class="m-r">
			<view class="m-r-1 f-jsb">
				<view class="m-r-1-L f-ajc">
					<view>{{moment.uname}}</view>
					<view class="iconfont f-ajc " :class="genderclass">{{moment.uage}}</view>
				</view>
				<view class="m-r-1-r f-ajc">
					<view v-show="!moment.isFollow" class="f-ajc iconfont icon-add">关注</view>
					<view class="iconfont icon-del"></view>
				</view>
			</view>
			<view class="m-r-2">
				{{moment.commentNum}}
			</view>
			<view class="m-r-3">
				<!-- 图片 -->
				 <image v-if="moment.mtype != 2" :src="moment.mfimage" mode="scaleToFill"></image>
				 <!-- 视频 -->
				 <template v-if="moment.mtype == 1">
					 <view class="iconfont icon-Play f-ajc m-r-3-v"></view>
					 <view class="m-r-3-n">{{moment.video.playnum}} 次播放 {{moment.video.long}}</view>
				 </template>

				<view v-if="moment.mtype == 2" class="m-r-3-share f-ac">
					<image :src="moment.share.mfimage" mode="scaleToFill"></image>
					<view>{{moment.share.mtitle}}</view>
				</view>
			</view>
			<view class="m-r-4 f-jsb">
				<view>{{moment.location}}</view>
				<view class="m-r-4-r f-ajc">
					<view class="iconfont icon-share" :class="{do: moment.me.isShare}"> {{moment.shareNum}}</view>
					<view class="iconfont icon-comment"  :class="{do: moment.me.iscomment}"> {{moment.commentNum}}</view>
					<view class="iconfont icon-smile"  :class="{do: moment.me.isThumb}"> {{moment.thumbNum}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			moment: Object
		},
		data(){
			return {
			}
		},
		created() {
			// console.log(this.)
		},
		computed:{
			genderclass(){
				switch(this.moment.ugender){
					case 0: 
						return ["icon-boy","m-g-b"]
					case 1:
						return ["icon-girl","m-g-g"]
				}
				return []
			}
		}
	}
</script>

<style scoped>
	.moment {
		margin-left: 20rpx;
		margin-top: 20rpx;
		margin-right: 10rpx;
	}
	.m-L> image {
		height: 100rpx;
		width: 100rpx;
		border-radius: 100%;
		margin-right: 20rpx;
	}
	.m-L {
		width: 100rpx;
	}
	.m-r{
		flex: 1;
		border-bottom: 1rpx solid rgba(1,1,2,0.1);
		padding-bottom: 20rpx;
	}
	.m-r > view{
		width: 100%;
	}
	
	.m-r {
		margin: 0 20rpx;
	}

	.m-r-1-L view:first-child {
		color: #969696;
		font-size: 30rpx;
		margin-right: 10rpx;
	}
	.m-g-b {
		background-color: #6EC4E7!important;
	}
	
	.m-g-g{
		background-color: #F989A4!important;
	}
	
	.m-r-1-L view:last-child {
		color: #ffffff;
		font-size: 21rpx;
		border-radius: 20rpx;
		background-color: #FAE19A;
		padding: 0rpx 10rpx;
		height: 40rpx;
	}
	.m-r-1-r  {
		margin-right: 10rpx;
	}
	
	.m-r-1-r > view:first-child {
		margin-right: 20rpx;
		background-color: #EEEEEE;
		padding: 5rpx 10rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
	}
	
	.m-r-1-r > view:last-child {
		color: #888888;
	}
	
	.m-r-2 {
		margin: 10rpx 0;
		color: #171606;
		font-size: 28rpx;

	}
	
	.m-r-3 {
		position: relative;
	}
	.m-r-3 > image, .m-r-3-v { 
		width: 100%;
		height: 400rpx;
		border-radius: 20rpx;
	}
	.m-r-3 > .m-r-3-v, .m-r-3 > .m-r-3-n {
		position: absolute;
		color: #FFFFFF;
	}
	
	.m-r-3 > .m-r-3-v {
		font-size: 140rpx;
		top: 0;
		background-color: rgba(1,1,2,0.1);
	}
	
	.m-r-3 > .m-r-3-n {
		bottom: 20rpx;
		right: 10rpx;
		background-color: rgba(1,1,2,0.5);
		padding: 5rpx 10rpx;
		border-radius: 10rpx;
	}
	.m-r-3-share {
		background-color: #FAF7FB;
		padding: 10rpx;
		border-radius: 20rpx;
		
	}
	.m-r-3-share > image {
		width: 140rpx;
		height: 100rpx;
		margin-right: 30rpx;
		border-radius: 20rpx;
	}
	
	.m-r-4 {
		color: #B9B8B9;
		margin-top: 10rpx;
	}
	.m-r-4-r > view{
		margin-right: 20rpx;
		font-size: 30rpx;
	}
	.m-r-4-r > view::before{
		margin-right: 10rpx;
	}
	
	.m-r-4-r .do {
		color: #EECFA5;
	}
</style>
